<template>
  <el-dialog
      :title="!form.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      fullscreen
      @close="closeDialog()"
      :visible.sync="visible">
    <el-form :model="form" ref="form" label-width="140px" class="demo-ruleForm">
      <el-form-item required label="项目编号" prop="projectCode">
        <el-select v-model="form.projectCode" :disabled="form.id != 0" @change="changeProjectCode" placeholder="请选择">
          <el-option
              v-for="item in projectCodeOptions"
              :key="item.prProjectNumber"
              :label="item.prProjectName"
              :value="item.prProjectNumber">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="样机商标·型号·名称">
        <el-input v-model="form.prototypeTrademark"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="9">
            <span style="margin-left: 30px; font-weight: bold; font-size: 20px;">
              样机
            </span>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in form.sampleDetailsList" :key="index">
        <el-col :span="8">
          <el-form-item label="样机">
            {{index + 1}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="projectName" label="样品编号">
            <el-input type="text" placeholder="请输入样品编号" v-model="item.sampleNumber"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="unit" label="出厂编号">
            <el-input type="text" placeholder="请输入出厂编号" v-model="item.appearanceNumber"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="designValue" label="出厂日期">
            <el-date-picker v-model="item.appearanceDate" type="date" value-format="yyyy-MM-dd" placeholder="选择出厂日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="designValue" label="用途">
            <el-input type="text" placeholder="请输入用途" v-model="item.purpose"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="样品等级">
        <el-input v-model="form.sampleGrade"></el-input>
      </el-form-item>
      <el-form-item label="供样数量">
        <el-input v-model="form.samplingBasicNumber" type="number"></el-input>台
      </el-form-item>
      <el-form-item label="样品状态">
        <el-input v-model="form.sampleStatus"></el-input>
      </el-form-item>
      <el-form-item label="封签类型">
        <el-checkbox-group v-model="form.sampleTypeList">
          <el-checkbox label="纸封签"></el-checkbox>
          <el-checkbox label="铅封"></el-checkbox>
          <el-checkbox label="印记封"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封签部位">
        <el-input v-model="form.sealingPosition"></el-input>
      </el-form-item>
      <el-form-item label="抽样地点">
        <el-input v-model="form.sampleSite"></el-input>
      </el-form-item>
      <el-form-item label="样品存放地点">
        <el-input v-model="form.sampleLocation"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="24">
            <span style="margin-left: 30px; font-weight: bold; font-size: 20px;">
              单位
            </span>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in form.sampleInspectionWorkplaceDetailList" :key="index">
        <el-col :span="8">
          <el-form-item prop="column" label="栏目">
            <el-input type="text" placeholder="请输入栏目" v-model="item.columnName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="unit" label="单位名称">
            <el-input type="text" placeholder="请输入单位名称" v-model="item.unitName"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="designValue" label="邮政编码">
            <el-input type="text" placeholder="请输入邮政编码" v-model="item.postalCode"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="phone" label="电话">
            <el-input type="text" placeholder="请输入电话" v-model="item.phone"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="检验依据">
        <el-input v-model="form.inspectionBasis"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="抽样日期">
        <el-date-picker v-model="form.sampleDate" type="date" value-format="yyyy年MM月dd日" placeholder="选择抽样日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      form: {
        id: 0,
        projectCode: null,
        sampleDetailsList: [{}],
        sampleInspectionWorkplaceDetailList: [
          {columnName: "生产单位"},
          {columnName: "供样单位"},
          {columnName: "验（收）样单位"}
        ],
        sampleTypeList: []
      },
      projectCodeOptions: [],
      projectCodeMap: {},
    }
  },
  mounted() {
    this.getProductCode();
  },
  methods: {
    changeProjectCode(val) {
      for (let i = 1; i < 2; ++i) {
        this.form.sampleDetailsList[i - 1].sampleNumber = `${val}s`;
      }
      this.form.sampleDetailsList.for
    },
    getProductCode(){
      this.$http({
        url: this.$http.adornUrl('/reportapproval/product/getProjectNumber'),
        method: 'get',
        data: this.$http.adornParams({})
      }).then((data) => {
        if (data && data.code === 0) {
          this.projectCodeOptions = data.productList;
          this.projectCodeOptions.forEach(item => this.projectCodeMap[item.prProjectNumber] = item);
        }else {
          this.$message.error(data.msg)
        }
      })
    },
    init(id) {
      this.form.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        if (this.form.id) {
          this.$http({
            url: this.$http.adornUrl(`/sampleInspection/${id}`),
            method: 'get',
          }).then(res => {
            if (res.code === 0) {
              this.form = res.data;
              this.form.sampleTypeList = res.data.sampleType.split(',');
            }
          })
        }
      })
    },
    resetForm() {
      this.form = {
        id: 0,
        projectCode: null,
        sampleDetailsList: [{}, {}],
        sampleSheetWorkplaceDetailList: [
          {columnName: "样机生成单位"},
          {columnName: "供样单位"},
          {columnName: "抽样单位"}
        ],
        sampleTypeList: []
      },
          this.projectCodeOptions = {}
      this.projectCodeMap = {}
    },
    closeDialog() {
      this.resetForm();
      this.$emit('refreshDataList');
    },
    // 表单提交
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.sampleType = this.form.sampleTypeList.join(',');
          this.$http({
            url: this.$http.adornUrl(`/sampleInspection`),
            method: this.form.id ? 'put' : 'post',
            data: this.form
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
